<!-- 每日任务 -->
<template>
	<view class="daily-tasks">
		<view class="daily-tasks-header">
			<view class="header_box">
				<view class="de_left"><image :src="customer.avatar?customer.avatar:'/static/my/logo_no.png'" ></image> </view>
				<view class="de_right">
					<text class="title">{{customer.nickName}}</text>
					<text class="subtitle">{{customer.phone}}</text>
				</view>
			</view>
		</view>
		
		<view class="daily-tasks-body">
			<view class="dt_title">
				邀请用户列表
			</view>
			<view class="no_info" v-if="dataList.length == 0" style="padding-top: 200rpx;">
				<image src="@/static/null_img.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
			<view class="dt_list" v-else>
				<view class="dt_li" v-for="(item,index) in dataList" :key="index">
					<view class="dt_li_left">{{item.customerName}}</view>
					<view class="dt_li_right">{{item.createTime}}</view>
				</view>

			</view>
			
		</view>
		

        <uni-load-more :status="moreStatus" v-if="dataList && dataList.length > 0"></uni-load-more>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[],
				customer:{},
				// more/loading/noMore
				moreStatus:'more',
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数

			}
		},
		onLoad() {
			this.getCustomer()
			this.getDatalist()
		},
		methods: {
			// 获取用户信息
			 getCustomer() {
				this.$api.getCustomer().then(res => {
					this.customer = res.data
				})
			},
			async getDatalist(){
				uni.showLoading()
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				try{
					const res = await this.$api.getReferrerCustomerList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
						this.moreStatus = 'noMore'
					} else {
						this.moreStatus = 'more'
					}
					
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
				
			}
	
		},
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				this.moreShop = 'noMore'
			} else {
				this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getDatalist()
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.daily-tasks {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.daily-tasks-header {
		position: absolute;
		z-index: 2;
		width: 750rpx;
		height: 278rpx;
		background: url('/static/blindbox/my-in-bg.png') no-repeat;
		background-size: 100% 100%;

		box-sizing: border-box;
		padding-top: 50rpx;
		padding-left: 58rpx;
	}
	.header_box{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.de_left image{
		width: 92rpx;
		height: 92rpx;
		background: #FEF9E5;
		border-radius: 50%;
	}

	.de_right {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.de_right .title {
		font-weight: 400;
		font-size: 32rpx;
		line-height: 44rpx;
		color: #FFFFFF;
	}

	.de_right .subtitle {
		font-weight: 400;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #FFFFFF;
	}
/* end */
	.daily-tasks-body {
		position: absolute;
		z-index: 3;
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		top: 192rpx;
		min-height: calc(100% - 252rpx);
		background: #ffffff url('/static/blindbox/daily-tasks-bg.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 40rpx 40rpx 0px 0px;
	}

	.dt_title {
		width: 100%;
		border-bottom: 1rpx solid #D0E1CE;;
		padding-top:40rpx;
		padding-bottom: 30rpx;
		font-size: 32rpx;
		color: #222222;
	}

	.dt_list {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
	}

	/* 列表 */
	.dt_li {
		width: 100%;
		margin-bottom: 34rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.dt_li_left {
		font-weight: 400;
		font-size: 32rpx;
		color: #222222;
	}
	.dt_li_right {
		font-size: 26rpx;
		text-align: right;
		color: #666666;
	}


</style>
